"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { Image } from "@nextui-org/image";
import { useThrottle } from "ahooks";
import "./globals.css";

// 定义类型
type StickyState = {
  num: number;
  isSticky: boolean;
};
export default function TopNav() {
  const [sticky, setSticky] = useState<number>(0);
  const stickys = useThrottle(sticky, { wait: 10 });

  useEffect(() => {
    const handleScroll = () => {
      setSticky(Math.floor(window.scrollY));
    };
    const timeoutId = setTimeout(() => {
      window.addEventListener("scroll", handleScroll);
    }, 100);
    return () => {
      clearTimeout(timeoutId);
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div
      className={`flex navbar justify-between items-center gap-6 overflow-hidden`}
      style={{
        transition: "all 0.4s",
        position: "sticky",
        backgroundColor: `transparent`,
        top: 0,
        backdropFilter: `blur(${
          Math.floor(stickys) > 50 ? 16 : Math.floor(stickys)
        }px)`,
        padding: `${24 - Math.floor(stickys)}px ${
          Math.floor(24 + stickys) > 100 ? 100 : Math.floor(24 + stickys)
        }px`,
        boxShadow:Math.floor(stickys) > 50 ? "0 4px 30px rgba(0,0,0,.07)":"none"
      }}
    >
      <div className="flex flex-none justify-center items-center gap-3">
        <Image width={50} alt="NextUI hero Image" src="/logo.png" />
        <div className="flex justify-center items-center flex-col">
          <span>
            <Image width={50} alt="优天辰logo" src="/ytc-logo.png" />
          </span>
          <span className="text-gray-500 text-xs">Tasks|优天辰</span>
        </div>
      </div>

      <div className="flex grow justify-center items-center">
        <Link
          href="/product"
          className="fixed flex text-gray-600 w-full justify-center pb-6 pt-8 lg:static lg:w-auto  lg:rounded-xl  lg:p-6 hover:text-blue-500"
        >
          产品
        </Link>
        <Link
          href="/price"
          className="fixed flex text-gray-600 w-full justify-center pb-6 pt-8 lg:static lg:w-auto  lg:rounded-xl  lg:p-6 hover:text-blue-500"
        >
          价格
        </Link>
        <Link
          href="/price"
          className="fixed flex text-gray-600 w-full justify-center pb-6 pt-8 lg:static lg:w-auto  lg:rounded-xl  lg:p-6 hover:text-blue-500"
        >
          模板中心
        </Link>
        <Link
          href="/price"
          className="fixed flex text-gray-600 w-full justify-center pb-6 pt-8 lg:static lg:w-auto  lg:rounded-xl  lg:p-6 hover:text-blue-500"
        >
          解决方案
        </Link>
        <Link
          href="/price"
          className="fixed flex text-gray-600 w-full justify-center pb-6 pt-8 lg:static lg:w-auto  lg:rounded-xl  lg:p-6 hover:text-blue-500"
        >
          客户案例
        </Link>
        <Link
          href="/price"
          className="fixed flex text-gray-600 w-full justify-center pb-6 pt-8 lg:static lg:w-auto  lg:rounded-xl  lg:p-6 hover:text-blue-500"
        >
          服务支持
        </Link>
      </div>
      <div className="flex flex-none gap-3">
        <button className="px-6 py-2 border-1 border-blue-500  text-blue-500 font-semibold rounded-lg shadow-lg hover:from-purple-500 hover:to-blue-500 transform  hover:border-blue-600 hover:text-blue-600 transition duration-300 ease-in-out">
          优天辰官网
        </button>
        <button className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold rounded-lg shadow-lg hover:from-purple-500 hover:to-blue-500 transform hover:scale-105 transition duration-300 ease-in-out">
          免费使用
        </button>
        <button className="px-2 py-2 text-gray-600 font-semibold rounded-lg transform  hover:border-blue-600 hover:text-blue-600 transition duration-300 ease-in-out">
          登录
        </button>
      </div>
    </div>
  );
}
